var _cosimgUrl = null;
CKEDITOR.dialog.add('cosimgDialog', function (editor) {
    return {
        title: '图片上传',
        minWidth: 400,
        minHeight: 200,
        contents: [
            {
                id: 'ossimg',
                label: '上传图片',
                elements: [
                    {
                        type: 'html',
                        id: 'cosimgBtn',
                        html: '<div style="width: 100%;height: 200px;border:dashed 3px #dedede;border-radius: 10px;box-sizing: border-box;position: relative;cursor: pointer;overflow: hidden;" id="cosimgUpBtn" >' +
                            '<div id="cosimgTxtTips" style="text-align: center;font-size: 18px;color: #999999;margin-top: 97px;transform: translateY(-50%)">点击选择文件</div>' +
                            '<div id="cosimgbox" style="width: 100%;height: 194px;background-size: cover;background-position: center;position: absolute;left: 0;top: 0;display: none;"></div>' +
                            '</div>' +
                            '<div style="line-height: 35px;color: #999999;display: none;" id="cosimgTips">上传进度:<span>0</span></div>' +
                            '<input id="cosimgInputFile" type="file" accept="image/*" style="display: none">',
                    }
                ]
            }
        ],
        onShow: function () {
            document.querySelector("#cosimgUpBtn").onclick = function () {
                document.querySelector("#cosimgInputFile").click();
            };
            // 监听选文件
            document.querySelector('#cosimgInputFile').onchange = function () {
                var file = this.files[0];
                if (!file) return;
                // 分片上传文件
                cos.sliceUploadFile({
                    Bucket: Bucket,
                    Region: Region,
                    Key: Path + (new Date()).getTime() + '_' + file.name,
                    Body: file,
                    onHashProgress: function (progressData) {
                        //console.log('校验中', JSON.stringify(progressData));
                        document.querySelector("#cosimgTips>span").innerHTML = '校验中';
                    },
                    onProgress: function (progressData) {
                        document.querySelector("#cosimgTxtTips").style.display = "none";
                        document.querySelector("#cosimgTips").style.display = "block";
                        document.querySelector("#cosimgTips>span").innerHTML = (progressData.percent * 100) + '%';
                    },
                }, function (err, data) {
                    if (err == null) {
                        _cosimgUrl = 'https://' + data.Location;
                        document.querySelector("#cosimgbox").style['background-image'] = "url(" + _cosimgUrl + ")";
                        document.querySelector("#cosimgbox").style.display = "block";
                    } else {
                        alert('COS配置错误');
                    }
                });
            };
        },
        onOk: function () {
            var ele = CKEDITOR.dom.element.createFromHtml('<p><img style="max-width: 100%;" src="' + _cosimgUrl + '"/></p><br/>');
            editor.insertElement(ele);
            _cosimgUrl = null;
            document.querySelector("#cosimgTxtTips").style.display = "block";
            document.querySelector("#cosimgTips").style.display = "none";
            document.querySelector("#cosimgbox").style.display = "none";
        }
    };
});